<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" th:href="@{/css/styles.css}">
  <title>order-form</title>
</head>
<body>

<pre>
  th:field="*{name}" 会自动创建id=name name=name

  th:errors属性引用了ccNumber输入域，如果该输入域存在错误，那么它会将元素的占位符内容替换为校验信息

</pre>
<form method="POST" th:action="@{/orders}" th:object="${order}">
  <h1>Order your taco creations!</h1>

  <img th:src="@{/images/index.jpg}"/>
  <a th:href="@{/design}" id="another">Design another taco</a><br/>

  <div th:if="${#fields.hasErrors()}">
        <span class="validationError">
        Please correct the problems below and resubmit.
        </span>
  </div>

  <h3>Deliver my taco masterpieces to...</h3>
  <label for="name">Name: </label>
  <input type="text" th:field="*{name}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('name')}"
        th:errors="*{name}">Name Error</span>

  <br/>

  <label for="street">Street address: </label>
  <input type="text" th:field="*{street}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('street')}"
        th:errors="*{street}">Street Error</span>

  <br/>

  <label for="city">City: </label>
  <input type="text" th:field="*{city}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('city')}"
        th:errors="*{city}">City Error</span>

  <br/>

  <label for="state">State: </label>
  <input type="text" th:field="*{state}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('state')}"
        th:errors="*{state}">State Error</span>

  <br/>

  <label for="zip">Zip code: </label>
  <input type="text" th:field="*{zip}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('zip')}"
        th:errors="*{zip}">Zip Error</span>

  <br/>

  <h3>Here's how I'll pay...</h3>
  <label for="ccNumber">Credit Card #: </label>
  <input type="text" th:field="*{ccNumber}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('ccNumber')}"
        th:errors="*{ccNumber}">CC Num Error</span>
  <br/>

  <label for="ccExpiration">Expiration: </label>
  <input type="text" th:field="*{ccExpiration}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('ccExpiration')}"
        th:errors="*{ccExpiration}">CC Num Error</span>

  <br/>

  <label for="ccCVV">CVV: </label>
  <input type="text" th:field="*{ccCVV}"/>

  <span class="validationError"
        th:if="${#fields.hasErrors('ccCVV')}"
        th:errors="*{ccCVV}">CC Num Error</span>
  <br/>

  <input type="submit" value="Submit order"/>
</form>

</body>
</html>